<template>
	<!-- 首页配置 -->
	<div>
		<headpage username="首页配置" routername="main1"></headpage>
		<ul class="list">
			<li v-for="(item,index) in list" :key="index">{{item.text}}
				<div class="right">
					<input type="checkbox" checked="item.display" @click="change(index)" v-model="item.display">
				</div>
			</li>
		</ul>
		<div class="foot">
			<p @click="submit">保存</p>
		</div>
	</div>
</template>

<script>
	import bus from "../../bus.js"
	import headpage from "../headpage.vue"
	export default {
		name: "home_page_configuration",
		components: {
			headpage
		},
		data() {
			return {
				list: [{
						text: "part1",
						display: true
					},
					{
						text: "part2",
						display: true
					},
					{
						text: "part3",
						display: true
					},
					{
						text: "part4",
						display: true
					},
					{
						text: "part5",
						display: true
					}
				]
			}
		},
		methods: {
			change(index) {
				this.list[index].display = !this.list[index].display
				console.log(this.list[index].display, index)
			},
			submit() {
				bus.$emit("showlist", {
					showlist: [{
							show: this.list[0].display
						},
						{
							show: this.list[1].display
						},
						{
							show: this.list[2].display
						},
						{
							show: this.list[3].display
						},
						{
							show: this.list[4].display
						},
					]
				})
			}
		}
	}
</script>

<style scoped="scoped">
	ul,
	li,
	p {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.list {
		padding: 10px;
	}

	.list li {
		line-height: 40px;
		border-radius: 999em;
		font-size: 10px;
		border: 1px solid lightblue;
		margin: 20px;
		position: relative;
	}

	.right {
		display: inline-block;
		position: absolute;
		right: 10px;
	}

	.foot {
		width: 100%;
		position: fixed;
		bottom: 0;
		text-align: center;
		padding: 10px;
		color: white;
		background-color: lightblue;
	}
</style>
